<template>
    <view class="container">
      <!-- 顶部组件 -->
      <u-navbar
        id="nav-bar"
        :is-back="true"
        :background="{ background: '#fff' }"
        :border-bottom="false"
        title="收益明细"
      ></u-navbar>
      <view class="content">
        <!-- <mescroll-body
            ref="mescrollRef"
            @init="mescrollInit"
            top="0"
            @down="downCallback"
            :up="upOption"
            @up="upCallback"
          > -->
        <view class="list">
          <view class="item">
            <view class="main">
              <view class="title">展业还款</view>
              <view class="time">2024-02-03 12:21:22</view>
            </view>
            <view class="num color-red">+123.21</view>
          </view>
        </view>
        <!-- </mescroll-body> -->
      </view>
    </view>
  </template>
  <script>
  import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';

  export default {
    mixins: [MescrollMixin],
    data() {
      return {
        upOption: {
          page: {
            num: 0,
            size: 10,
          },
          noMoreSize: 5,
        },
        mescroll: null,
        list: [],
      };
    },
    onLoad() {},
    methods: {
      navigateTo(url) {
        uni.navigateTo({
          url: url,
        });
      },
      mescrollInit(mescroll) {
        this.mescroll = mescroll;
      },
      downCallback() {
        this.list = [];
        this.mescroll.resetUpScroll();
      },
      upCallback(page) {
        this.getData(page);
      },
      getData(page) {
        const that = this;
        const param = {
          pageNumber: page.num,
          pageSize: page.size,
          status: that.tabCurrent,
        };
        //   service.getTradePage(
        //     param,
        //     function (res) {
        //       if (res && res.data) {
        //         that.mescroll.endSuccess(res.data.data.length);
        //         if (page.num == 1) that.recordList = [];
        //         that.recordList = that.recordList.concat(res.data.data);
        //       }
        //     },
        //     function (res) {}
        //   );
      },
    },
  };
  </script>

  <style lang="scss" scoped>
  .container {
    width: 100%;
    min-height: 100vh;
    padding: 30rpx;
    text-align: center;
    background-color: #f5f5f5;
  }

  .content {
    width: 100%;
    background: transparent;
    overflow: hidden;
  }

  .list {
    width: 100%;
    overflow: hidden;
    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30rpx;
      width: 100%;
      padding: 30rpx;
      background: #ffffff;
      border-radius: 16rpx;
      .main {
        display: flex;
        flex-direction: column;
        min-width: 0;
        line-height: 1;
        .title {
          width: 100%;
          font-weight: 800;
          font-size: 28rpx;
          color: #333333;
          text-align: left;
        }
        .time {
          margin-top: 24rpx;
          width: 100%;
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
          text-align: left;
        }
      }
      .num {
        min-width: 0;
        font-weight: 800;
        font-size: 28rpx;
      }
      .color-red {
        color: #f03434;
      }
      .color-green {
        color: #29cc7a;
      }
    }
  }
  </style>
